<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, onBeforeUnmount, watch, shallowRef } from 'vue'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '350px'
    },
    chartData: {
      type: Object,
      required: true
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const chart = shallowRef(null)
    let resizeHandler = null
    
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementsByClassName(props.className)[0]
      if (!chartDom) return
      
      chart.value = echarts.init(chartDom)
      setOptions(props.chartData)
    }
    
    // 设置图表配置
    const setOptions = (data = {}) => {
      if (!chart.value) return
      
      const { labels = [], datasets = [] } = data
      
      const series = datasets.map(dataset => {
        return {
          name: dataset.label,
          type: 'line',
          stack: dataset.stack,
          smooth: true,
          areaStyle: dataset.backgroundColor ? {} : null,
          data: dataset.data,
          itemStyle: {
            color: dataset.borderColor || '#409EFF'
          },
          lineStyle: {
            width: dataset.borderWidth || 2,
            color: dataset.borderColor || '#409EFF'
          },
          areaStyle: dataset.backgroundColor ? {
            color: dataset.backgroundColor
          } : null
        }
      })
      
      chart.value.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: labels,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series
      })
    }
    
    // 监听数据变化
    watch(
      () => props.chartData,
      (newValue) => {
        setOptions(newValue)
      },
      { deep: true }
    )
    
    // 监听窗口大小变化
    const handleResize = () => {
      if (chart.value) {
        chart.value.resize()
      }
    }
    
    // 生命周期钩子
    onMounted(() => {
      initChart()
      
      if (props.autoResize) {
        resizeHandler = echarts.throttle(handleResize, 300)
        window.addEventListener('resize', resizeHandler)
      }
    })
    
    onBeforeUnmount(() => {
      if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler)
      }
      
      if (chart.value) {
        chart.value.dispose()
        chart.value = null
      }
    })
    
    return {}
  }
}
</script> 